<template>
	<view class="recruitment" :style="{
		height: lockPage?'100vh':'auto',
		overflow: 'hidden'
	}">
		<!--  todo 此处没有切图 所有src为空  -->
		<image src="~@/static/shop/enter_banner.png" class="recruitment-banner"></image>
		<view class="recruitment-welcome">
			<view>美人荟免单节商家入驻申请</view>
			<view>欢迎加入我们免单节活动 流量互联 共创佳绩</view>
		</view>
		<view class="recruitment-form">
			<view class="recruitment-form-item">
				<view class="recruitment-form-item__title">门店名称</view>
				<input placeholder="请填写" border="surround" v-model="form.name"></input>
			</view>
			<view class="recruitment-form-item">
				<view class="recruitment-form-item__title">手机号</view>
				<input placeholder="请填写" border="surround" v-model="form.phone" maxlength="11"></input>
			</view>
			<view class="recruitment-form-item">
				<view class="tuijianren">商家推荐人</view>
				<input placeholder="请填写" border="surround" v-model="form.linkman" maxlength="11"></input>
			</view>
			<view class="recruitment-form-item">
				<view class="recruitment-form-item__title">门店LOGO</view>
				<view class="recruitment-form-item__desc">这里是上传清晰的门店LOGO，PNG或者JPG的图片，20MB以内。</view>
				<view>
					<view class="img-box">
						<view class="img-item-box" v-for="(item,index) in logoList">
							<image class="recruitment-form-item__upload" :src="item"
								mode="scaleToFill">
							</image>
							<image src="../../static/icon-close.png" class="img-close" mode="" @click="delImg('logoList',index)"></image>
						</view>
						<view v-if="logoList.length<1" class="recruitment-form-item__upload"
							@click="pickImage('logoList','form',1)">
							<u-icon name="plus" color="#999" size="55"></u-icon>
							<text>点击上传</text>
						</view>
					</view>
				</view>
			</view>
			<view class="recruitment-form-item">
				<view class="recruitment-form-item__title">门店形象</view>
				<view class="recruitment-form-item__desc">门头照请上传形象最好的哦，PNG或者JPG的图片，5MB以内。</view>
				<view>
					<view class="img-box">
						<view class="img-item-box" v-for="(item,index) in imagePhotoList">
							<image class="recruitment-form-item__upload" :src="item"
								mode="scaleToFill">
							</image>
							<image src="../../static/icon-close.png" class="img-close" mode="" @click="delImg('imagePhotoList',index)"></image>
						</view>
						<view v-if="imagePhotoList.length<9" class="recruitment-form-item__upload"
							@click="pickImage('imagePhotoList','form',9)">
							<u-icon name="plus" color="#999" size="40"></u-icon>
							<text>点击上传</text>
						</view>
					</view>
				</view>
			</view>
			<view class="recruitment-form-item">
				<view class="recruitment-form-item__title">营业执照</view>
				<view class="recruitment-form-item__desc">请上传清晰的营业执照，复印件请盖公章，PNG或者JPG的图片。</view>
				<view>
					<view class="img-box">
						<view class="img-item-box" v-for="(item,index) in licenseList">
							<image class="recruitment-form-item__upload" :src="item"
								mode="scaleToFill">
							</image>
							<image src="../../static/icon-close.png" class="img-close" mode="" @click="delImg('licenseList',index)"></image>
						</view>
						<view v-if="licenseList.length<9" class="recruitment-form-item__upload"
							@click="pickImage('licenseList','form',9)">
							<u-icon name="plus" color="#999" size="40"></u-icon>
							<text>点击上传</text>
						</view>
					</view>
				</view>
			</view>
			<view class="recruitment-form-item">
				<view class="recruitment-form-item__title">免单承诺</view>
				<view class="recruitment-form-item__desc">请上传清晰的照片，PNG或者JPG的图片。</view>
				<view>
					<view class="img-box">
						<view class="img-item-box" v-for="(item,index) in waiverCommitmentList">
							<image class="recruitment-form-item__upload"
								:src="item" mode="scaleToFill">
							</image>
							<image src="../../static/icon-close.png" class="img-close" mode="" @click="delImg('waiverCommitmentList',index)"></image>
						</view>
						<view v-if="waiverCommitmentList.length<9" class="recruitment-form-item__upload"
							@click="pickImage('waiverCommitmentList','form',9)">
							<u-icon name="plus" color="#999" size="40"></u-icon>
							<text>点击上传</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="recruitment-form" style="padding-top: 0;">
			<view class="recruitment-form-item">
				<view class="recruitment-form-item__title">请填写参与免单项目及使用须知</view>
				<view class="recruitment-form-item__desc">这里填写参与免单服务项目，提供高价值的服务更吸引客户到店（类别
					为美食 请在项目名称栏填写美食名称</view>
				<button @click="showAddProjectPopup">
					<image class="add" src="~@/static/shop/add.png" mode="widthFix"></image>
					<text>添加免单项目</text>
				</button>
			</view>
			<view class="recruitment-form-item">
				<view class="recruitment-form-item__title">用户消费须知</view>
				<textarea v-model="form.notice" maxlength="2000" count
					placeholder="这里填写客户到店需要准备什么，要注意哪些事项例： 1、所有项目需要提前预约"></textarea>
			</view>
		</view>
		<view class="recruitment-form">
			<view class="recruitment-form-item">
				<view class="recruitment-form-item__title" style="margin-top: 15rpx;">到店指引</view>
				<view class="recruitment-form-item__desc">
					这里设置门店营业时间、地址、方便用户到店服务
				</view>
			</view>
			<picker :range="times" mode="multiSelector" @change="timeChange">
				<view class="recruitment-form-item no_margin">
					<view class="recruitment-form-item__wrap">
						<view class="recruitment-form-item__title no_margin">营业时间</view>
						<view class="recruitment-form-item__more">
							{{form.business_hours || '请设置时间'}}
							<u-icon name="arrow-right" size="18" color="#999"></u-icon>
						</view>
					</view>
				</view>
			</picker>
			<view class="recruitment-form-item no_margin">
				<view class="recruitment-form-item__wrap">
					<view class="recruitment-form-item__title no_margin">联系电话</view>
					<view class="recruitment-form-item__more flex-auto">
						<input style="text-align: right;width: 100%;" class="h40Input" type="text" maxlength="11"
							placeholder="请输入电话" v-model="form.contact_number">
					</view>
				</view>
			</view>
			<!-- 门店地址   -->
			<view class="recruitment-form-item" @click="openPicker">
				<view class="recruitment-form-item__title">门店地址</view>
				<view class="recruitment-form-item__select">
					<view class="placeholder">
						<!-- <text>请选择门店地址</text> -->
						<text>{{form.address?form.address:"请选择"}}</text>
						<u-icon name="arrow-down" size="24" color="#999"></u-icon>
					</view>
				</view>
			</view>
			<view class="recruitment-form-item no_margin">
				<view class="recruitment-form-item__wrap">
					<view class="recruitment-form-item__title no_margin">详细地址</view>
					<view class="recruitment-form-item__more" style="flex:1;">
						<input v-model="form.full_address" class="h40Input" type="text" placeholder="请输入"
							style="width: 100%;text-align: right;">
					</view>
				</view>
			</view>
			<view class="recruitment-form-item">
				<view class="recruitment-form-item__wrap">
					<view class="recruitment-form-item__title no_margin">地标信息</view>
					<view class="recruitment-form-item__more" style="flex:1;">
						<input class="h40Input" v-model="form.landmark" type="text" placeholder="请输入"
							style="width: 100%;text-align: right;">
					</view>
				</view>
			</view>
			<view class="recruitment-form-item">
				<view class="recruitment-form-item__wrap" @click="getLocation">
					<view class="recruitment-form-item__title no_margin" style="flex-shrink: 0;">定位信息</view>
					<view class="recruitment-form-item__more" style="display: flex;margin-left: 20rpx;">
						<text style="text-align: right;word-wrap: break-word;width: 420rpx;"
							v-if="form.longitude || form.latitude">经度：{{parseFloat(form.longitude).toFixed(2)}} ~
							纬度：{{parseFloat(form.latitude).toFixed(2)}}</text>
						<text v-else>请选择</text>
						<u-icon name="arrow-down" size="24" color="#999"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="btn_plac"></view>
		<view class="btn_box">
			<u-button :loading="loading" type="warning" color="rgb(249,211,31)" class="btn" @click="submit">提交入驻申请
			</u-button>
		</view>

		<area-select @choseVal="choseValue" :lotusAddressData="lotusAddressData"></area-select>
		<!-- project popup -->
		<u-popup v-model="projectPopupShow" :round="10" @close="closeProjectProject" mode="bottom">
			<view class="project_box">
				<view v-if="projects.length && !showProjectAddBox" class="projects">
					<!-- title -->
					<view class="head">
						免单项目
						<view class="close" @click="projectPopupShow = false">
							<u-icon name="close" color="#ff0000" size="20"></u-icon>
						</view>
					</view>
					<!-- ctn -->
					<view class="line flex" v-for="(item,index) in projects" :key="index">
						<view class="name">{{item.name}}</view>
						<view class="right flex">
							<view class="edit" @click="editProject(item)">编辑</view>
							<view class="del" @click="projects.splice(index,1)">删除</view>
						</view>
					</view>
					<!-- btn -->
					<view class="btn flex" @click="showAddProjectForm">
						<u-icon name="plus" color="#f00"></u-icon>
						&nbsp;&nbsp;&nbsp;添加
					</view>
				</view>
				<view v-else class="add_project_box">
					<!-- title -->
					<view class="head">
						添加免单项目
						<view class="close" @click="projectPopupShow = false">
							<u-icon name="close" color="#ff0000" size="20"></u-icon>
						</view>
					</view>
					<!-- ctn -->
					<view class="ctn_box">
						<view class="line_box" style="border: none;">项目图片</view>
						<view class="img-box" @click="pickImage('img','showProject',1)">
							<view class="img-item-box" v-if="showProject.img">
								<image class="recruitment-form-item__upload"
									:src="showProject.img" mode="scaleToFill">
								</image>
							</view>
							<view v-else class="recruitment-form-item__upload">
								<u-icon name="plus" color="#999" size="40"></u-icon>
								<text>点击上传</text>
							</view>
						</view>
						<!-- <view @click="pickImage('img','showProject',1)">
							<image v-if="showProject.img" class="recruitment-form-item__upload" :src="showProject.img"
								mode="scaleToFill"></image>
							<view v-else class="recruitment-form-item__upload">
								<u-icon name="plus" color="#999" size="40"></u-icon>
								<text>点击上传</text>
							</view>
						</view> -->
						<view class="line_box">
							<view class="flex-none">
								<text class="must">*</text>
								项目名称
							</view>
							<input type="text" v-model="showProject.name" class="flex-auto" placeholder="请输入" />
						</view>
						<view class="line_box">
							<view class="flex-none">
								<text class="must">*</text>
								市场价值
							</view>
							<input type="text" v-model="showProject.market_value" class="flex-auto" placeholder="请输入" />
						</view>
						<view class="line_box" style="border:none;">
							<view class="flex-none">
								<text class="must">*</text>
								服务类型
							</view>
						</view>
						<picker mode="selector" :range="shopTypes" range-key="name" @change="shopTypesChange">
							<view class="recruitment-form-item__select">
								<view class="placeholder">
									<!-- <text>请选择门店地址</text> -->
									<text>{{showTypeStr?showTypeStr:"请选择"}}</text>
									<u-icon name="arrow-down" size="24" color="#999"></u-icon>
								</view>
							</view>
						</picker>
					</view>
					<!-- btn -->
					<view class="btn_box" style="box-shadow: none;">
						<u-button :loading="loading" type="warning" color="rgb(249,211,31)" class="btn"
							@click.stop="addProject">保存</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		time
	} from '../shop/const/index.js'
	import cUpload from '@/common/cUpload.js'
	import AreaSelect from '@/components/selectAddress/Winglau14-lotusAddress.vue'
	import editShop from './_mixins/recruitment/edit.js'
	import addShop from './_mixins/recruitment/add.js'
	let uploadTime = 0,
		tempScrollTopSave = 0;
	export default {
		mixins: [editShop, addShop],
		components: {
			AreaSelect
		},
		data() {
			return {
				store_id: '',
				times: [
					['开始时间', ...time],
					['结束时间', ...time]
				],
				model: {

				},
				// form
				form: {
					user_id: '',
					name: '',
					phone: '',
					linkman: '',
					logo: '',
					address: '',
					full_address: '',
					longitude: '',
					latitude: '',
					business_hours: '',
					image_photo: '',
					license: '',
					waiver_commitment: '',
					notice: '',
					contact_number: '',
					details: [],
					landmark: ''
				},
				projects: [],
				showProjectAddBox: true,
				showProject: {},
				loading: false,
				lotusAddressData: {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				region: '',
				projectPopupShow: false,
				shopTypes: [],
				showTypeStr: '',
				shops: [],
				stopScroll: false,
				tempScrollTop: 0,
				logoList: [],
				imagePhotoList: [],
				licenseList: [],
				waiverCommitmentList: []
			}
		},
		computed: {
			isEdit() {
				return !!this.store_id
			},
			lockPage() {
				return this.lotusAddressData.visible || this.projectPopupShow
			}
		},
		watch: {
			lockPage(n) {
				if (n) {
					tempScrollTopSave = this.tempScrollTop;
					this.tempScrollTop = 0
				} else {
					this.$nextTick(function() {
						uni.pageScrollTo({
							scrollTop: tempScrollTopSave,
							duration: 0
						})
					})
				}

			}
		},
		/**
		 * 商户 ID
		 */
		onLoad({
			store_id = ''
		}) {
			this.store_id = store_id
			this.getShopByUserId();
		},
		methods: {
			delImg(key,index){
				this[key].splice(index,1)
			},
			showAddProjectPopup() {
				this.projectPopupShow = true;
				this.stopScroll = true;
			},
			async getShopByUserId() {
				try {
					const userinfo = uni.getStorageSync('userinfo')
					const res = await this.$http.post('getStoreDataByUserId', {
						user_id: userinfo.id
					});
					if (!uni.getStorageSync('token')) {
						uni.showToast({
							title: '请登录后操作',
							icon: 'none'
						})
						setTimeout(() => {
							// this.phone=e.phone
							// this.userid=e.id
							uni.navigateTo({
								url: `/pagesuser/public/login?id=${this.userid}&phone=${this.phone}`
							})
						}, 1000)
					}
					if (this.isEdit) {
						this.initEdit(res.data);
					} else {
						if (res.data && res.data.id) {
							if (res.data.status == 1) {
								uni.redirectTo({
									url: '/pages/shop/index?id=' + res.data.id
								})
							} else {
								uni.showToast({
									title: '平台正在审核商家信息。。。',
									icon: 'none'
								})
								setTimeout(() => {
									// this.phone=e.phone
									// this.userid=e.id
									uni.navigateTo({
										url: '/pages/index/index'
									})
								}, 2000)
							}
						}
					}
				} finally {
					this.getShopTypes();
				}
			},
			closeProjectProject() {
				this.showProject = {};
				this.showProjectAddBox = false;
				this.startScroll();
			},
			addProject() {
				const {
					showProject
				} = this;
				if (!showProject.name.trim()) {
					this.$api.msg('请输入项目名')
				} else if (!showProject.market_value.trim()) {
					this.$api.msg('请输入市场价值')
				} else if (!showProject.type_id) {
					showProject.type_id = this.shopTypes[0].id;
				} else {
					if (!showProject.store_id) {
						showProject.store_id = this.projects.length + 1
					} else {
						const index = this.projects.findIndex(item => item.store_id == showProject.store_id)
						if (~index) this.projects.splice(index, 1)
					}
					this.projects = [showProject, ...this.projects]
					this.showProjectAddBox = false;
					this.showProject = {};
				}
			},
			shopTypesChange(res) {
				const index = res.detail.value;
				this.showProject.type_id = this.shopTypes[index].id;
				this.showTypeStr = this.shopTypes[index].name;
				this.$forceUpdate();
			},
			async getShopTypes() {
				const res = await this.$http.get('shopCategory')
				this.shopTypes = res.data;
			},
			//打开picker
			openPicker() {
				// this.lotusAddressData.visible = true;
				// this.lotusAddressData.provinceName = '广东省';
				// this.lotusAddressData.cityName = '广州市';
				// this.lotusAddressData.townName = '白云区';
				this.lotusAddressData = {
					...this.lotusAddressData,
					visible: true
				}
			},
			//回传已选的省市区的值
			choseValue(res) {
				//res数据源包括已选省市区与省市区code
				this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose && res.province && res.city && res.town) {
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
					this.form.address = this.region;
				} else {
					this.$api.msg('请选择省市县')
				}
			},

			pickImage(key, objKey = 'form',maxNum = 9) {
				uni.chooseImage({
					count: maxNum == 9 ? 9 - this[key].length : maxNum,
					success: async (resp) => {
						resp.tempFilePaths.forEach(async (item) => {
							console.log(this.showProject.img)
							try {
								const res = await cUpload(item);
								if (res.data.url) {
									if(objKey == 'form'){
										this[key].push(this.$baseUrl + res.data.url)
									}else{
										console.log(objKey)
										console.log(key)
										console.log(this[objKey][key])
										console.log(this.showProject.img)
										this[objKey][key] = this.$baseUrl + res.data.url
									}
									this.$forceUpdate();
								} else {
									this.$api.msg('上传失败')
								}
							} catch (e) {
								this.$api.msg('上传失败')
							}
						})

					}
				})
			},
			timeChange(e) {
				const res = e.detail.value;
				if (!res[0]) {
					this.$api.msg('请选择开始时间')
				} else if (!res[1]) {
					this.$api.msg('请选择结束时间')
				} else {
					this.form.business_hours = `${time[res[0]-1]} ~ ${time[res[1]-1]}`
				}
			},
			async submit() {

				if (!this.verify()) return;
				const userinfo = uni.getStorageSync('userinfo')

				try {
					this.loading = true
					const query = {
						...this.form
					}
					query.user_id = userinfo.id;
					query.details = JSON.stringify(this.projects);

					if (this.isEdit)
						this.editShop(query)
					else
						this.addShop(query)

				} finally {
					this.loading = false
				}

			},
			getLocation() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						uni.chooseLocation({
							success: (res) => {
								this.form.longitude = res.longitude
								this.form.latitude = res.latitude
							}
						});
					},
					fail() {
						uni.showModal({
							title: '温馨提示',
							content: '为了享受智能小程序，您必须授权！',
							showCancel: false,
							confirmText: '确认授权'
						}).then(res => {
							if (res[1]['confirm']) {
								uni.openSetting()
							}
						})
					}
				})
			},
			reset() {
				this.form = {
					user_id: '',
					name: '',
					phone: '',
					linkman: '',
					logo: '',
					address: '',
					full_address: '',
					longitude: '',
					latitude: '',
					business_hours: '',
					image_photo: '',
					license: '',
					waiver_commitment: '',
					notice: '',
					contact_number: '',
					details: [],
					landmark: ''
				};
				this.logoList = []
				this.imagePhotoList = []
				this.licenseList = []
				this.waiverCommitmentList = []
				this.projects = []
				this.lotusAddressData = {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				}
				this.region = ''
				this.showTypeStr = ''
			},
			verify() {
				let msg = '';

				const {
					form
				} = this;
				form.logo = this.logoList.toString()
				form.image_photo = this.imagePhotoList.toString()
				form.license = this.licenseList.toString()
				form.waiver_commitment = this.waiverCommitmentList.toString()
				if (!form.name.trim()) {
					msg = '请输入门店名称';
				} else if (!form.phone.trim()) {
					msg = '请输入手机号';
				} else if (!/^1[3-9]\d{9}$/.test(form.phone)) {
					msg = '手机号输入有误';
					// } else if(!form.linkman.trim()){
					// 	msg = '请输入商家推荐人手机号';
				} else if (!/^1[3-9]\d{9}$/.test(form.linkman) && form.linkman.trim()) {
					msg = '商家推荐人手机号输入有误';
				} else if (!form.logo) {
					msg = '请上传门店logo';
				} else if (!form.address) {
					msg = '请输入门店地址';
				} else if (!form.longitude || !form.latitude) {
					msg = '请选择坐标';
				} else if (!form.business_hours) {
					msg = '请选择营业时间';
				} else if (!form.image_photo) {
					msg = '请上传门店形象照图片';
				} else if (!form.license) {
					msg = '请上传营业执照';
				} else if (!form.waiver_commitment) {
					msg = '请上传免单承诺';
				} else if (!form.full_address) {
					msg = '请选择详细地址';
				} else if (!form.contact_number) {
					msg = '请输入联系电话';
				} else if (!/^1[3-9]\d{9}$/.test(form.contact_number)) {
					msg = '联系电话输入有误';
				} else if (!form.notice.trim()) {
					msg = '请输入用户消费须知';
				} else if (!this.projects || !this.projects.length) {
					msg = '请添加项目';
				} else if (!form.landmark.trim()) {
					msg = '请输入地标信息'
				}

				if (msg) this.$api.msg(msg)

				return !msg;
			},
			editProject(item = {}) {
				this.showProject = {
					...item
				}
				this.showTypeStr = (this.shopTypes.find(info => info.id == item.type_id) || {}).name
				this.$forceUpdate();
				this.showProjectAddBox = true
			},
			showAddProjectForm() {
				this.showProject = {};
				this.showProjectAddBox = true;
			},
			startScroll() {
				this.stopScroll = false;
				this.$nextTick(() => {
					uni.pageScrollTo({
						scrollTop: this.tempScrollTop,
						duration: 0
					});
				})
			}
		},
		onPageScroll({
			scrollTop
		}) {
			this.tempScrollTop = scrollTop;
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
		color: #333;
	}

	.recruitment {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;

		&-banner {
			width: 100%;
			height: 424rpx;
		}

		&-welcome {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: white;
			font-size: 28rpx;
			padding: 20rpx 0;
			line-height: 50rpx;
		}

		&-form {
			margin-top: 30rpx;
			background: white;
			padding: 15rpx 30rpx;
			font-size: 20rpx;

			&-item {
				margin-bottom: 20rpx;

				&__title {
					font-weight: 700;
					margin-bottom: 16rpx;
					margin-top: 35rpx;
					font-size: 28rpx;


					&::before {
						content: '*';
						color: red;
					}
				}

				&__select {
					height: 50rpx;
					border-radius: 8rpx;
					border: 1px solid #999;

					&>.placeholder {
						display: flex;
						justify-content: space-between;
						align-items: center;
						line-height: 50rpx;
						padding: 0 10rpx;
					}
				}

				&__more {
					font-size: 24rpx;
					color: #999;

					input {
						border: none !important;
						width: 110rpx;

						&::placeholder {
							text-align: right;
						}
					}
				}

				&__desc {
					color: red;
					font-size: 22rpx;
					margin-top: -10rpx;
					margin-bottom: 28rpx;
					line-height: 33rpx;
				}

				&__upload {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 160rpx;
					border: 1px dashed #999;
					color: #999;
					font-size: 22rpx;
				}

				&__wrap {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					border-bottom: 1px solid #999;
					padding: 12rpx 0;
				}

				input {
					height: 76rpx;
					border: 1rpx solid #DCDCDC;
					border-radius: 8rpx;
					padding: 0 20rpx;
					font-size: 26rpx;
				}

				.h40Input {
					height: 40rpx;
					width: 100%;
					text-align: right;
				}

				button {
					font-size: 24rpx;
					color: #999;
					height: 76rpx;
					// line-height: 60rpx;
					border-radius: 8rpx;
					background: none;
					border: 1px solid #999;
					display: flex;
					align-items: center;
					justify-content: center;

					.add {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
				}

				textarea {
					height: 160rpx;
					border: 1px solid #999;
					border-radius: 8rpx;
					font-size: 24rpx;
					padding: 24rpx;
				}
			}
		}


		.no_margin {
			margin: 0;
		}
	}

	.btn_plac,
	.btn_box {
		height: 125rpx;
		margin-top: 20rpx;
	}

	.tuijianren {
		font-weight: 700;
		margin-bottom: 16rpx;
		margin-top: 35rpx;
		font-size: 28rpx;
	}

	.btn_box {
		position: fixed;
		background-color: #fff;
		bottom: 0;
		left: 0;
		width: 100vw;
		box-shadow: 0rpx 0rpx 19rpx 0rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}

	.project_box {
		font-size: 30rpx;

		.head {
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: gray;
			position: relative;
			border-bottom: 1px solid gray;

			.close {
				position: absolute;
				right: 45rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.add_project_box {

			.ctn_box {
				padding: 23rpx 75rpx 180rpx;

				.line_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 18rpx 0;
					border-bottom: 1px solid gray;
				}

				.must {
					color: red;
					margin-right: 8rpx;
				}

				input {
					text-align: right;
					margin-left: 20rpx;
					padding-right: 10rpx;
					font-size: 28rpx;
				}
			}

		}

		.projects {
			min-height: 300rpx;

			.flex {
				display: flex;
				align-items: center;
			}

			.edit {
				color: rgb(249, 211, 31);
			}

			.del {
				color: #F22424;
			}

			.edit,
			.del {
				margin-left: 30rpx;
			}

			.line {
				padding: 20rpx;
				justify-content: space-between;
			}

			.btn {
				width: max-content;
				margin: 30rpx auto;
			}
		}
	}

	::v-deep .btn button {
		width: 603rpx;
		height: 75rpx !important;
		border-radius: 38rpx;
		font-size: 30rpx;
		background-color: rgb(249, 211, 31) !important;
	}

	::v-deep .u-drawer-content {
		// background-color: #999!important;
		border-radius: 20rpx 20rpx 0 0;
	}

	.flex-auto {
		flex: 1;
	}

	.flex-none {
		flex-shrink: 0;
	}

	.img-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.img-box .img-item-box {
		margin-right: 24rpx;
		margin-bottom: 24rpx;
	}

	.img-box>.recruitment-form-item__upload {
		margin-bottom: 24rpx;
	}

	.img-item-box {
		position: relative;
	}

	.img-item-box>.img-close {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		width: 50rpx;
		height: 50rpx;
	}
</style>
